﻿<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="partial/layoutAdmin">
<head>
<title>编辑</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
	.title-prompt {
		position: absolute;
		right: 0px;
		font-size: 12px;
		top: 10px;
	}
	
	.createPost-container {
		position: relative;
	}
	
	.createPost-main-container {
		padding: 40px 45px 20px 50px;
	}
	
	.postInfo-container {
		position: relative;
		margin-bottom: 10px;
	}
	
	.postInfo-container-item {
		float: left;
	}
	
	.editor-container {
		min-height: 500px;
		margin: 0 0 30px;
	}
	
	.editor-upload-btn-container {
		text-align: right;
		margin-right: 10px;
	}
	
	.editor-upload-btn {
		display: inline-block;
	}
	
	.word-counter {
		width: 40px;
		position: absolute;
		right: -10px;
		top: 0px;
	}
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 400px;
    height: 240px;
    line-height: 240px;
    text-align: center;
  }
  .avatar {
     width: 400px;
    height: 240px;
    display: block;
  }
  .el-upload--picture-card {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    margin: 0px;
    width: 400px;
    height: 240px;
    line-height: 146px;
    vertical-align: top;
}
.el-upload-list--picture-card .el-upload-list__item {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
     width: 400px;
    height: 240px;
    margin: 0px;
    display: inline-block;
}
</style>
</head>
<body>
	<div layout:fragment="content">
		<div class="createPost-container">
			<el-form class="form-container" :model="submitForm" :rules="rules" ref="submitForm">
			<div class="sub-navbar" :style="{top:stickyTop+'px',zIndex:zIndex,position:position,width:width,height:52+'px',background:'#BDBFBA'}">
				<slot>
					<div>
						<template v-if="fetchSuccess"> 
							 <el-button v-loading="loading" type="success"
								@click="submitMusic">保存</el-button> 
								<el-button v-loading="loading" type="default"
								@click="returnMusic">返回</el-button> 
						</template>
					</div>
				</slot>
			</div>
			<div class="createPost-main-container">
				<el-row> 
					<el-col :span="24"> 
						<el-card class="box-card">
						 <div slot="header" class="clearfix">
						    <i class="el-icon-upload"></i><span>添加图片</span>
						  </div>
						  <el-form ref="form" :model="submitForm" label-width="80px">
						  		<el-form-item label="标题">
								    <el-input v-model="submitForm.title"></el-input>
								</el-form-item>
								<el-form-item label="排序码">
								    <el-input v-model="submitForm.sortCode"></el-input>
								</el-form-item>
								<el-form-item label="选择音乐">
								<div v-if="submitForm.imgSrc" class="el-upload-list el-upload-list--picture-card ">
									  		<div class="el-upload-list__item is-success">
											  		<img :src="submitForm.imgSrc" class="avatar">
												  <label class="el-upload-list__item-status-label">
												  		<i class="el-icon-upload-success el-icon-check"></i>
												  </label>
												  <i class="el-icon-close" @click="handleRemove"></i>
												  <span class="el-upload-list__item-actions">
												      <span class="el-upload-list__item-preview">
												      	<i class="el-icon-zoom-in" @click="handlePictureCardPreview"></i>
												      </span>
												      <span class="el-upload-list__item-delete">
											  			<i class="el-icon-delete" @click="handleRemove"></i>
												  	  </span>
												  </span>
									  		</div>
									  </div>
								    <el-upload
									  class="avatar-uploader"
									  :headers="headers"
									  action="/qiniu/upload"
									  :show-file-list="false"
									  :on-success="uploadCoverImage"
									  :before-upload="validCoverImageUpload">
									  <el-button v-if="submitForm.imgSrc"  v-loading="loading" type="success"><i class="el-icon-edit"></i>更换</el-button>
									  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
									
								</el-form-item>
						  </el-form>
						  <el-dialog :visible.sync="dialogVisible">
							  <img width="100%" :src="submitForm.imgSrc">
							</el-dialog>
						</el-card>
					</el-col> 
			</div>
			</el-form>
		</div>
	</div>
	<div layout:fragment="jscontent">
		<script th:inline="javascript" type="text/javascript">
		var initMusicModel=function(){
			var musicModel=[[${musicModel}]];
			if(musicModel!=null){
				this.submitForm.title=musicModel.title;
				this.submitForm.url=musicModel.url;
				this.submitForm.sortCode=musicModel.sortCode;
				this.submitForm.id=musicModel.id;
			}
			
		}
		var returnMusic=function(){
			window.location.href='/music'
		}
		var submitMusic=function(status){
			var param=this.submitForm;
			$.ajax({
		        data: param,
		        type: "POST",
		        url: '/music/saveMusic',
		        traditional:true, 
		        /* async: false, */
		        success: function (result) {
					if(result.code==0){
						app.$message({
					          message: result.msg,
					          type: 'success'
					        });
					}else{
						app.$message.error(result.msg);
					}
		        },
		        error: function (data) {
		        	
		        }
		    });
			
		}
	 var app = new Vue({
         el: '#app',
         data:{
        	 submitForm:{
        		  title: '',
	  			  linkUrl: '', 
	  			  id: 0,
	  			  isShow: 1,
	  			  imgSrc: '',
	  			  sortCode:0
	  			},
	  		  dialogVisible:false,
      		  active: false,
      		  position: '',
      		  currentTop: '',
      		  width: undefined,
      		  height: undefined,
      		  stickyHeight: 0,
   			  fetchSuccess: true,
   		      loading: false,
   		      rules: {},
   		      hasChange: false,
  	      	  hasInit: false,
  	      	  stickyTop:0,
  	      	  zIndex:2,
  	      	  headers:{}
   	    },
   	 watch: {
   	    value(val) {
   	     this.submitForm.content=val;
   	      if (!this.hasChange && this.hasInit) {
   	        this.$nextTick(() => tinymce.get(this.tinymceId).setContent(val))
   	      }
   	    }
   	  },
   	 mounted() {
   		 var token = $("meta[name='_csrf']").attr("content");
		 var header = $("meta[name='_csrf_header']").attr("content");
		 var str= '{ "'+header+'": "'+token+'"}'; 
		 this.headers = eval('(' + str + ')');
   	     this.height = this.$el.getBoundingClientRect().height;
   	     window.addEventListener('scroll', this.handleScroll);
   	   },
   	   activated() {
   	     this.handleScroll();
   	   },
   	   destroyed() {
   	     window.removeEventListener('scroll', this.handleScroll);
   	   },
   	  created() {
   		 this.initMusicModel();
   	  },
 	 methods: {
 		isShowChange(data){
 			this.submitForm.isShow=data;
 		},
 		initMusicModel:initMusicModel,
 		submitMusic:submitMusic,
 		sticky() {
	      if (this.active) {
	        return
	      }
	      this.position = 'fixed'
	      this.active = true
	      this.width = this.width + 'px'
	    },
	    reset() {
	      if (!this.active) {
	        return
	      }
	      this.position = ''
	      this.width = 'auto'
	      this.active = false
	    },
	    handleScroll() {
	      this.width = this.$el.getBoundingClientRect().width
	      const offsetTop = this.$el.getBoundingClientRect().top
	      if (offsetTop <= this.stickyTop) {
	        this.sticky()
	        return
	      }
	      this.reset()
	    },
	    returnMusic:returnMusic,
	    uploadCoverImage(res, file) {
	   	  if(res.success==1){
	   		  debugger;
				this.submitForm.imgSrc=res.results[0].url;
			}else{
				this.$message.error(res.msg);
			}
	       },
	       validCoverImageUpload(file) {
	    	  
	         const issync = true;
	         const isLt2M = file.size / 1024 / 1024 < 2;
	        
	         if (!isLt2M) {
	           this.$message.error('上传头像图片大小不能超过 2MB!');
	         }
	         return issync&&isLt2M;
	       },
	       handleRemove(){
	    	   this.submitForm.imgSrc='';
           },
           handlePictureCardPreview() {
	            this.dialogVisible = true;
           }
 	  }});
	 </script>
	</div>
</body>

</html>